
<template>
  <div class="face-recognize" >
    <div v-show="isStart">
      <div class="spin-content" ref='render'></div>
      <span class="info">{{ $t("cmlpanel.face_currentCount",{count:faceCount})}}</span>
    </div>
    <div class="tip"
      v-show="!isStart">
      {{ $t("cmlpanel.face_noStart") }}
    </div>
  </div>
</template>
<script>
import { Spin } from 'ant-design-vue'
import * as anov from 'anov-core'
import { setTimeout } from 'timers';

export default {
  name: 'FaceRecognizeMore',
  data() {
    return {

    }
  },
  computed: {
    ...anov.faceRecognizeServer.mapState(['isStart','faceCount'])
  },
  watch: {
  
  },
  mounted() {
      anov.faceRecognizeServer._canvas.style='width:100%'
      this.$refs.render.appendChild(anov.faceRecognizeServer._canvas)
  },
  beforeDestroy() {
    
  },
  methods: {
  
  },
  components: {
    ASpin: Spin
  }
}
</script>

<style lang="scss" scoped>
.canvas {
  width: 100%;
  max-width: 100%;
}
.info {
  color: #aaa;
}
.tip {
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #668d93;
}
</style>
